<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px; height: 100px; background: red; }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>

  var box = document.querySelector(".box");

  document.onkeydown = function(eve){
    var e = eve || window.event;

    // console.log(e.key);   // 按键
    // console.log(e.keyCode);  // 键码，ASCII码
    // console.log(e.which);  // 键码，ASCII码

    // console.log( e.keyCode || e.which );

    // 组合键：
    // windows:ctrl; MAC:control
    // console.log( e.ctrlKey );
    // console.log( e.shiftKey );
    // windows:alt; MAC:option
    // console.log( e.altKey );
    // windows:win; MAC:command
    // console.log( e.metaKey );

    box.innerHTML = "按下了" + e.key + "键";
  }
  
</script>
</html>